<template>
  <pageHeader
    title="手动排程"
    :breadCrumb="['生产管理', '生产排程']"
    :show-back="true"
  >
    <template #buts>
      <a-button @click="router.back()">取消</a-button>
      <a-button type="primary" @click="handleOk">保存</a-button>
    </template>
  </pageHeader>
  <a-spin :loading="loading" class="cantainer">
    <div class="orderBox">
      <a-row :gutter="15">
        <a-col
          :span="8"
          v-for="(header, index) in schedulingHerders"
          :key="index"
        >
          <a-form-item show-colon :label="header.name">
            <template v-if="!!header.code">
              {{ schedulingData[header.code] }}
            </template>
            <template v-if="header.name === '投入物料'">
              {{
                schedulingData.inputMaterials
                  ?.map(({ inputMaterialsName }: any) => inputMaterialsName)
                  .join('-')
              }}
            </template>
            <template v-if="header.name === '紧急等级'">
              {{
                emergencyLevel?.filter(
                  ({ id }: any) => id === schedulingData.emergencyLevel
                )[0]?.value
              }}
            </template>
          </a-form-item>
        </a-col>
      </a-row>
    </div>
  </a-spin>
  <Table ref="tableRef"></Table>
</template>

<!-- emergencyLevel -->
<script setup lang="ts">
  import { reactive, onMounted, ref, computed } from 'vue';
  import { AddProducePlan } from '@/api/produce-management/OrderPlanning/index';
  import { TPlanProduction } from '@/api/produce-management/OrderPlanning/type';
  import { PostDispatching } from '@/api/produce-management/produce-list/index';
  import { useRoute, useRouter } from 'vue-router';
  import { Message } from '@arco-design/web-vue';
  import Table from './Table/index.vue';

  let router = useRouter();
  let loading = ref(false);
  let schedulingData = reactive<any>({}); //排程分页数据
  let tableRef = ref();
  let refForm = ref();

  //点击确定
  let handleOk = async () => {
    try {
      const newData: any = [];
      let sum = 0;

      tableRef.value.tableData.forEach((ele: any) => {
        const {
          schedulingId,
          produceLineId,
          schedulingNumber,
          planBeginAt,
          planEndAt,
          planTime,
          resourceType,
        } = ele;
        if (!schedulingNumber) {
          throw new Error('排程数量不能为空');
        }
        sum += schedulingNumber;
        newData.push({
          schedulingId,
          produceLineId,
          schedulingNumber,
          planBeginAt,
          planEndAt,
          planTime,
          resourceType,
          processGroupId: schedulingData.processGroupId,
        });
      });

      if (sum > schedulingData.workShopPlanName) {
        throw new Error('排程数量大于计划数量');
      }
      await PostDispatching({ dispatchings: newData });
      router.push({ name: 'ProductionDispatch' });
    } catch (error) {
      console.log(error);
      Message.error(`${error}`);
    }
  };

  onMounted(async () => {
    let scheduling;
    try {
      //拿分页数据
      scheduling = JSON.parse(
        localStorage.getItem('ManualSchedulingForm') + ''
      );
    } catch (err) {
      //
    }
    if (scheduling) {
      Object.assign(schedulingData, scheduling);
    }
  });
  const emergencyLevel = [
    { id: 1, value: '一般', color: '#009933' },
    { id: 2, value: '紧急', color: '#409eff' },
    { id: 3, value: '加急', color: '#ff8000' },
    { id: 4, value: '特急', color: '#ff0000' },
  ];

  let schedulingHerders = [
    { code: 'schedulingNumber', name: '排程订单号', width: 180 },
    { code: 'workShopCode', name: '关联计划单号', width: 180 },
    // { code: 'capacity', name: '关联任务单号', width: 180 },
    { code: 'produceCode', name: '产品编码', width: 180 },
    { code: 'produceName', name: '产品名称', width: 180 },
    { code: 'spec', name: '规格型号', width: 180 },
    { code: 'unit', name: '生产单位', width: 180 },
    { code: 'workShopPlanName', name: '计划数量', width: 180 },
    { code: 'scheduledQuantity', name: '已排程数量', width: 180 },
    { code: 'completedQuantity', name: '已完工数量', width: 180 },
    { name: '紧急等级', width: 180 },
    { code: 'workShopCode', name: '工序名称', width: 180 },
    { name: '投入物料', width: 180 },
    { code: 'outputProductName', name: '产出产品', width: 180 },
    { code: 'workShopName', name: '所属车间', width: 180 },
  ];
</script>

<style scoped lang="less">
  .cantainer {
    padding: 20px;
    width: 100%;
  }
  .form {
    padding-left: 100px;
    padding-right: 100px;
  }
  .tab {
    border-left: 4px rgb(var(--arcoblue-6)) solid;
    padding-left: 20px;
    margin-bottom: 30px;
    font-size: 20px;
  }
  .orderBox {
    padding: 0px;
  }
</style>
